react-dnd-html5-backend

What is react-dnd-html5-backend?

The react-dnd-html5-backend package is a backend implementation for react-dnd (React Drag and Drop) that uses the HTML5 drag and drop API. It enables you to implement drag and drop functionalities in your React applications using the native HTML5 API.

What are react-dnd-html5-backend's main functionalities?

Drag Source

This code sample demonstrates how to create a draggable component using the useDrag hook from react-dnd. The component becomes a drag source that can be dragged around the screen.

import { useDrag } from 'react-dnd';

function DraggableComponent() {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'BOX',
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  }));

  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      Draggable Content
    </div>
  );
}

Drop Target

This code sample shows how to create a drop target using the useDrop hook from react-dnd. The component can accept draggable items and provides visual feedback when an item is dragged over it.

import { useDrop } from 'react-dnd';

function DroppableComponent() {
  const [{ canDrop, isOver }, drop] = useDrop(() => ({
    accept: 'BOX',
    drop: () => ({ name: 'DroppableComponent' }),
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  }));

  return (
    <div ref={drop} style={{ backgroundColor: isOver ? 'green' : 'white' }}>
      {canDrop ? 'Release to drop' : 'Drag a box here'}
    </div>
  );
}

Custom Drag Layer

This code sample illustrates how to use a custom drag layer to render a custom preview of the draggable item. The useDragLayer hook provides the necessary state to render the preview at the correct position.

import { useDragLayer } from 'react-dnd';

function CustomDragLayer() {
  const { isDragging, item, currentOffset } = useDragLayer((monitor) => ({
    item: monitor.getItem(),
    currentOffset: monitor.getSourceClientOffset(),
    isDragging: monitor.isDragging(),
  }));

  if (!isDragging) {
    return null;
  }

  return (
    <div style={{ position: 'fixed', pointerEvents: 'none', left: currentOffset.x, top: currentOffset.y }}>
      Custom Drag Layer Content
    </div>
  );
}

Other packages similar to react-dnd-html5-backend

react-beautiful-dnd

react-beautiful-dnd is a higher-level abstraction built on top of the drag and drop API. It provides a more opinionated but user-friendly way to implement drag and drop with smooth animations and accessibility features. Unlike react-dnd-html5-backend, it does not require a separate backend package to work.

dnd-kit

dnd-kit is a modern drag and drop toolkit for React that is built with hooks. It offers a more flexible API and better touch support compared to react-dnd-html5-backend. It also includes features like sortable lists and multiple items dragging out of the box.

react-sortable-hoc

react-sortable-hoc is a set of higher-order components to turn any list into an animated, touch-friendly, sortable list. It's more focused on sorting capabilities and less on general drag and drop scenarios compared to react-dnd-html5-backend.

README

React DnD HTML5 Backend

The officially supported HTML5 backend for React DnD. See the docs for usage information.

Installation

If you use npm:

npm install --save react-dnd-html5-backend

The npm package defaults to the CommonJS build.

However it also includes a pre-minified UMD build in the dist folder. The UMD build exports a global window.ReactDnDHTML5Backend when imported as a <script> tag.

If you’d rather not use npm, you can use unpkg to access the UMD build directly: ReactDnDHTML5Backend.min.js. You may point your Bower config to it.

Browser Support

We strive to support the evergreen browsers, Safari 7+, as well as IE11+. IE10 should also work, but DragLayer is fairly useless because IE10 doesn’t support pointer-events: none. We don’t officially support IE9 and less.

Unfortunately the browser bugs, inconsistencies, and regressions come up from time to time, so please make sure you test your app on the browsers you’re interested in, and report any bugs to us.

License

MIT